<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 创建动态脚本语言 -->
<script type="text/javascript">
//创建鼠标焦点离开事件
function usnChange(){
	//1.获取用户名输入的表单的对象，通过javascript内置document通过id属性获取
	var username=document.getElementById("usn");
	//创建span标签的对象
	var userspan=document.getElementById("usnspan");
	//username是<input type="text" name="usn" id="usn" />的对象
	//2.判断用户是否输入了用户名的参数
	if(username.value==""){
		//弹出提示框 "用户名必须输入" alert一个按钮的一个提示框，父类window，可以省略的
		//alert("用户名必须输入!");
		userspan.innerHTML="用户名必须输入!";
	}else if(username.value.length<=3){
		//alert("用户名长度>3!");
		//innerHTML；动态添加html内容的一个属性
		userspan.innerHTML="用户名长度>3!";
	}else{
		userspan.innerHTML="ok";
	}
}
function pwdChange(){
	//1.获取用户名输入的表单的对象，通过javascript内置document通过id属性获取
	var username=document.getElementById("pwd");
	//创建span标签的对象
	var userspan=document.getElementById("pwdspan");
	//username是<input type="text" name="usn" id="usn" />的对象
	//2.判断用户是否输入了用户名的参数
	if(username.value==""){
		//弹出提示框 "用户名必须输入" alert一个按钮的一个提示框，父类window，可以省略的
		//alert("用户名必须输入!");
		userspan.innerHTML="密码必须输入!";
	}else if(username.value.length<=3){
		//alert("用户名长度>3!");
		//innerHTML；动态添加html内容的一个属性
		userspan.innerHTML="密码长度>3!";
	}else{
		userspan.innerHTML="ok";
	}
}
function foc(){
	document.getElementById("usn").value="";
}
</script>
</head>
<body>
用户登录:
<form action="loginCheck" method="post">
<!-- 3.在input表单中添加鼠标焦点离开事件 -->
Username:<input type="text" onblur="usnChange()" onfocus="foc()" 
value="请输入用户名" name="usn1" id="usn"  />
<span id="usnspan">*</span><br/>
Password:<input type="password" name="pwd1" id="pwd" 
onblur="pwdChange()" /><span id="pwdspan">*</span><br/>
<input type="submit" value="提交" /><br/>
</form>
</body>
</html>